<template>
	<z-paging ref="paging" v-model="list" @query="getData" :loading-more-enabled="false">
		<view class="d-ccc">
			<!-- v-if="list.length > 0" -->
			<view class="d-flex d-p-t-40 d-p-l-30 d-p-r-30">
				<u-avatar :src="userinfo.avatar" size="140rpx" shape="circle"></u-avatar>
				<view class="d-flex-1">
					<view class="d-font-32 d-ff d-m-l-22 d-p-t-30">{{userinfo.username}}</view>
					<view class="d-font-26 d-ff d-m-l-22">游泳健身使人快乐，游泳健身变得健康！</view>
				</view>
				<u-avatar @click="jifenopen" src="../../static/qita/icon6.png" size="30rpx" shape="circle"></u-avatar>
			</view>
			<view class="d-nic">
				鲸鱼
			</view>
		</view>
		<view class="d-p-l-30 d-p-r-32 d-box">
			<view class="d-card d-p-t-50 d-p-b-50">
				<u-grid col="4">
					<!-- <u-grid-item @click="shopping">
						<view style="position: absolute;top: -20rpx;right: 40rpx;z-index: 999;">
							<u-badge :type="type" max="99" :value="0" bgColor='red'></u-badge>
						</view>
						<u-image src="/static/qita/icon2.png" width="54rpx" height="54rpx"></u-image>
						<view class="d-font-26 d-m-t-10">购物车</view>
					</u-grid-item> -->
					<u-grid-item @click="order">
						<view style="position: absolute;top: -20rpx;right: 40rpx;z-index: 999;">
							<u-badge :type="type" max="99" :value="numinfo.successOrderCount" bgColor='red'></u-badge>
						</view>
						<u-image src="/static/qita/icon.png" width="54rpx" height="54rpx"></u-image>
						<view class="d-font-26 d-m-t-10">订单</view>
					</u-grid-item>
					<u-grid-item @click="cardview">
						<view style="position: absolute;top: -20rpx;right: 40rpx;z-index: 999;">
							<u-badge :type="type" max="99" :value="numinfo.cardCount" bgColor='red'></u-badge>
						</view>
						<u-image src="/static/qita/icon4.png" width="54rpx" height="54rpx"></u-image>
						<view class="d-font-26 d-m-t-10">我的卡包</view>
					</u-grid-item>
					<u-grid-item @click="ticketview">
						<view style="position: absolute;top: -20rpx;right: 40rpx;z-index: 999;">
							<u-badge :type="type" max="99" :value="numinfo.ticketCount" bgColor='red'></u-badge>
						</view>
						<u-image src="/static/qita/icon1.png" width="54rpx" height="54rpx"></u-image>
						<view class="d-font-26 d-m-t-10">我的票包</view>
					</u-grid-item>
					<u-grid-item @click="card">
						<view style="position: absolute;top: -20rpx;right: 40rpx;z-index: 999;">
							<u-badge :type="type" max="99" :value="0" bgColor='red'></u-badge>
						</view>
						<u-image src="/static/qita/icon10.png" width="54rpx" height="54rpx"></u-image>
						<view class="d-font-26 d-m-t-10">我的场地</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view style="margin-top: 40rpx;">
				我的菜单
			</view>
			<view style="margin-top: 50rpx;position: relative;width: 100%;height: 150rpx;">
				<u-grid col="4" :border="false">
					<u-grid-item @click="tickettype">
						<view style="position: absolute;top: -5rpx;right: 10rpx;z-index: 999;">
							<!-- <u-badge :type="type" max="99" :value="value" bgColor='red'></u-badge> -->
						</view>
						<view class="d-font-26 d-m-t-10" style="margin-top: 20rpx;">积分商城</view>
						<u-image src="/static/qita/icon3.png" width="54rpx" height="54rpx"
							style="margin-top: 20rpx;"></u-image>
					</u-grid-item>
					<!-- <u-grid-item @click="card">
						<view style="position: absolute;top: -5rpx;right: 10rpx;z-index: 999;">
							<u-badge :type="type" max="99" :value="value" bgColor='red'></u-badge>
						</view>
						<view class="d-font-26 d-m-t-10" style="margin-top: 20rpx;">我的场地</view>
						<u-image src="/static/qita/icon10.png" width="54rpx" height="54rpx" style="margin-top: 20rpx;"></u-image>
					</u-grid-item> -->
					<u-grid-item @click="view">
						<view style="position: absolute;top: -5rpx;right: 10rpx;z-index: 999;">
							<!-- <u-badge :type="type" max="99" :value="value" bgColor='red'></u-badge> -->
						</view>
						<view class="d-font-26 d-m-t-10" style="margin-top: 20rpx;">代金券</view>
						<u-image src="/static/qita/icon5.png" width="54rpx" height="54rpx"
							style="margin-top: 20rpx;"></u-image>
					</u-grid-item>
					<u-grid-item @click="huanchun">
						<view style="position: absolute;top: -5rpx;right: 10rpx;z-index: 999;">
							<!-- <u-badge :type="type" max="99" :value="value" bgColor='red'></u-badge> -->
						</view>
						<view class="d-font-26 d-m-t-10" style="margin-top: 20rpx;">清除缓存</view>
						<u-image src="/static/qita/icon13.png" width="54rpx" height="54rpx"
							style="margin-top: 20rpx;"></u-image>
					</u-grid-item>
				</u-grid>
			</view>

		</view>
		<view class="d-mz d-font-26" @click="addonclickfh">
			查阅<text class="d-co">《免责条款》</text>
		</view>
		<view class=""
			style="position: absolute;background: rgba(0,0,0,0.6);width: 100%;height: 100vh;z-index: 998;top: 0;left: 0;"
			v-if="onclickin"></view>
		<view class="scrolllist" v-if="onclickin">
			<view class="toubu">免责条款</view>
			<scroll-view scroll-y="true" class="scroll">
				<!-- <view class="lingqu"></view> -->
				<view class="xiangqing">
					本网站技术支持由江苏点拓信息技术有限公司（以下简称“本公司”）提供，本公司保留该网站包含的信息和资料及其显示的条款、条件和说明变更的权利。您在使用本网站前，请您仔细阅读下列条款。如您不同意本法律声明及/或随时对其的修改，请勿继续使用本网站。如果您继续使用本网站，即意味着您已阅读、理解并同意接受本法律声明条款约束。本公司有权向违反本法律声明的用户追究法律责任。
				</view>
				<view class="xiangqing">
					1.对于本网站的内容，本公司不提供任何形式的明示或默示的关于内容的正确性、完整性、及时性、有效性、稳定性、可用性、不侵犯他人权利等方面的保证。本公司不对因依赖本网站资料内容而导致的任何损失承担任何责任，也不对任何因本网站提供的资料不充分、不完整或未能提供特定资料产生的任何损失承担任何责任。
				</view>
				<view class="xiangqing">2.任何在本网站出现的信息包括但不限于评论、预测、图表、指标、理论、直接的或暗示的指示均只作为参考，您须对任何自主决定的行为负责。
				</view>
				<view class="xiangqing">3.请自行妥善保管您的账号及密码，如您未保管好您的账号及密码而对您、本公司或第三方造成损害或损失，您将承担全部责任。
				</view>
				<view class="xiangqing">
					4.互联网传输可能会受到干扰、中断、延迟或数据错误，本公司对于非本公司能控制的通讯设施故障可能导致的数据及交易之准确性或及时性不负任何责任。不保证网站服务器及网络的稳定性，不保证本网站再任何时候均可供浏览、阅读和使用。
				</view>
				<view class="xiangqing">5.本公司对于您所使用的各项服务、或无法使用各项服务所导致的任何直接、间接、衍生或特别损害，不负任何赔偿责任
				</view>
				<view class="xiangqing">
					6.除特别指明外，本网站的设计思路、整体结构、网页设计、文字、图片、图表、软件、视音频文件、广告和其他信息等内容，其著作权均属本公司所有。未经本公司或相关权利人事先的书面许可，您不得以任何方式擅自复制、再造、传播、出版、转帖、改编、或陈列本网站的内容。同时，未经本公司书面许可，对于本网站上的任何内容，任何人不得在非本公司所属的服务器上做镜像。对于任何违反国家有关法律法规，不遵守本法律声明，未经本公司同意，擅自使用本网站内容的行为，本公司将保留追究法律责任的权利。
				</view>
				<view class="xiangqing">
					7.当您在本网站有相关商品购买所得的权益，与其介绍的所得权益不符时，应以相关介绍为准。如利用包括但不限于系统漏洞，测试商品价格等形式获得与实际商品不符的权益时，本公司有权追回您所得的额外权益并保留追究法律责任的权利。
				</view>
				<view class="xiangqing">
					8.本法律声明的订立、执行和解释及争议的解决均应适用中华人民共和国法律。本法律声明未涉及的问题参见国家有关法律法规。当本法律声明与国家法律、法规冲突时，以国家法律、法规为准。如您与本公司就本法律声明的内容或其执行发生任何争议，双方应尽量友好协商解决；协商不成时，任何一方均可向本公司所在地的人民法院提起诉讼。
				</view>
				<view class="xiangqing">9.最终解释权归本公司所有。
				</view>
				<view class="fanhui" @click="onclickfh">
					关闭
				</view>
			</scroll-view>

		</view>
		<template>


			<view class="guize" v-if="shuoming" >
				<view class="d-flex-3 justify-space-between" style="height: 80rpx;">
					<view class="d-bold">姓名</view>
					<input type="text" v-model="name"
						style="width: 42%;border-bottom: 1rpx #dadada solid;" />
				</view>
				<view class="d-flex-3 justify-space-between"style="height: 80rpx;">
					<view class="d-bold">手机号</view>
					<input type="text" v-model="phone"
						style="width: 42%;border-bottom: 1rpx #dadada solid;" />
				</view>
				<view class="d-flex-3 justify-space-between"style="height: 80rpx;" v-if="yanzm">
					<view class="d-bold">验证码</view>
					<view class="d-flex-3 d-row-left" style="width: 50vw;">
						<input class='catname' type="number" v-model="yanzhen" placeholder="请输入验证码" />
						<button class="btn_yan" @click="startCountdown" :disabled="counting">{{ buttonText }}</button>
					</view>
				</view>
				<view class="d-flex-3 justify-space-between"style="height: 80rpx;">
					<view class="d-bold">性别</view>
					<view class="" style="width: 42%;">
						<u-radio-group v-model="sex" iconPlacement="left">
							<u-radio label="男" :name="1" :iconSize='8' :labelSize='12' size='16' customStyle="margin-left: 20rpx;"/>
							<u-radio label="女" :name="0" customStyle="margin-left: 40rpx;" :iconSize='8' :labelSize='12'
								size='16' />
						</u-radio-group>
					</view>
				</view>
				<view class="d-flex-3 justify-space-between d-con"style="height: 80rpx;">
					<view class="d-quxiao" @click="jifeclick">取消</view>
					<view class="d-queding" @click="clickqd" v-if="yanzm == true">确定修改1</view>
					<view class="d-queding" @click="qdclick"  v-if="yanzm == false">确定修改</view>
				</view>
			</view>
		</template>
		<customer-Kefu></customer-Kefu>
	</z-paging>
</template>

<script>
	import {
		getMember,
		userinfo,sendSms,changeInfo
	} from '@/common/api';
	import customerKefu from '../../components/customerKefu/customerKefu.vue'
	export default {
		components: {
			customerKefu
		},
		data() {
			return {
				list: [],
				type: "warning",
				value: 2,
				userlist: uni.getStorageSync('userlist'),
				onclickin: false,
				userinfo: {},
				numinfo: {},
				shuoming: false,
				sex: '',
				counting: false, // 是否正在倒计时
				countdown: 60, // 倒计时时长，单位为秒
				buttonText: '验证码', // 按钮文本
				yanzhen:'',
				yanzm:false,
				phone:'',
				name:'',
				sexx:''

			};
		},
		onShow() {
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			if (this.$refs.paging) this.$refs.paging.reload(false);
		},
		methods: {
			// 手机号码验证码
			startCountdown() {
				if (this.counting) {
					return;
				}
				if (!this.phone) {
					uni.$u.toast('请输入手机号码');
					return;
				}
				// 开始倒计时
				this.counting = true;
				this.buttonText = `${this.countdown}s`;
			
				const timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
						this.buttonText = `${this.countdown}s`;
					} else {
						// 倒计时结束
						this.counting = false;
						this.countdown = 60;
						this.buttonText = '验证码';
						clearInterval(timer);
					}
				}, 1000);
				sendSms({
					phone: this.phone,
					event:'changeInfo'
				})
					.then(res => {
					})
					.catch(err => {
						uni.$u.toast('服务器繁忙,请稍后再试!');
					});
			},
			clickqd(){
				if (this.sex == 1) {
					this.sexx = '男'
				} else{
					this.sexx = '女'
				}
				changeInfo({
					usermobile: this.phone,
					username :this.name,
					sex :this.sexx,
					is_change_mobile: 1,
					yzm:this.yanzhen
				})
					.then(res => {
						this.shuoming = false
						this.yanzm = false
					})
					.catch(err => {
						uni.$u.toast('服务器繁忙,请稍后再试!');
					});
			},
			qdclick(){
				if (this.sex == 1) {
					this.sexx = '男'
				} else{
					this.sexx = '女'
				}
				if (this.phone == this.userinfo.usermobile ) {
					this.yanzm = false
					
					changeInfo({
						usermobile: this.phone,
						username :this.name,
						sex :this.sexx,
						is_change_mobile: 0,
						yzm:''
					})
						.then(res => {
							this.shuoming = false
							this.yanzm = false
						})
						.catch(err => {
							uni.$u.toast('服务器繁忙,请稍后再试!');
						});
				} else{
					this.yanzm = true
					console.log(2222)
				}
			},
			jifeclick() {
				this.shuoming = false
				this.yanzm = false
				this.phone = this.userinfo.usermobile
			},
			jifenopen() {
				this.shuoming = true
				this.getData()
			},
			addonclickfh() {
				this.onclickin = true
			},
			onclickfh() {
				this.onclickin = false
			},
			getData() {
				userinfo()
					.then(res => {
						this.numinfo = res
						this.userinfo = res.user
						this.phone = res.user.usermobile
						this.name = res.user.username
						if (res.user.sex == '男') {
							this.sex = 1
						} else{
							this.sex = 0
						}
					})

			},
			shopping() {
				// uni.$u.route({
				// 	url: '/pageA/shopping_cart/shopping_cart'
				// });
			},
			card() {
				// 在当前页面跳转到其他外部 H5 页面
				window.location.href="http://xmswjjh.doit10019.com/index.php/wxpay/phone/getplacebill/openid/" + uni.getStorageSync('OPENID')
			},
			cardview() {
				uni.$u.route({
					url: '/pageA/carddetail/carddetail'
				});
			},
			ticketview() {
				uni.$u.route({
					url: '/pageA/ticketdetail/ticketdetail'
				});
			},
			order() {
				uni.$u.route({
					url: '/pageA/order/order'
				});
			},
			tickettype() {
				uni.$u.route({
					url: '/pageA/integral/integral'
				});
			},
			paid() {

			},
			family() {},
			huanchun(){
				uni.removeStorageSync('token');
				uni.removeStorageSync('userlist');
				uni.removeStorageSync('OPENID');
				// uni.getStorageSync('valuesd') == '0'
				uni.$u.route({
					url: '/pages/login/login'
				});
			}
		}
	};
</script>

<style lang="scss">
	.d-ccc {
		idth: 100vw;
		height: 43vw;
		background-image: linear-gradient(0deg, #35aae7 0%, #1362ab 100%), linear-gradient(#e66a75, #e66a75);
		box-shadow: -2px 1px 3px 0 rgba(0, 0, 0, 0.11);
	}

	.d-ff {
		color: #fff;
	}

	.d-bold {
		font-weight: bold;
	}

	.d-box {
		margin-top: -100rpx;
	}

	.d-card {
		background: #ffffff;
		box-shadow: 0rpx 5rpx 38rpx 0rpx rgba(6, 0, 1, 0.4);
		border-radius: 30rpx;
	}

	.d-nic {
		color: #ff7e00;
		font-size: 2vw;
		border-radius: 12px;
		background-color: white;
		display: inline-block;
		margin-left: 10vw;
		padding: 2px 5px;
	}

	.d-mz {
		width: 100vw;
		height: 9vw;
		position: fixed;
		bottom: 12vw;
		border-top: 1px solid #e5e5e5;
		background-color: #fafafa;
		text-align: center;
		color: #646464;
		line-height: 8vw;
	}

	.d-co {
		color: #35aae7;
	}

	.scrolllist {
		position: fixed;
		z-index: 999;
		color: #000000;
		width: 74%;
		height: 50%;
		background-color: #fff;
		left: 13%;
		top: 20%;
		border-radius: 20rpx;


		.toubu {
			width: 100%;
			height: 50rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			text-align: center;
			margin-top: 10rpx;
			// position: absolute;
			// top: 10rpx;
		}

		.scroll {
			position: absolute;
			z-index: 999;
			color: #000000;
			width: 100%;
			height: 45vh;
			background-color: #fff;
			left: 0;
			top: 70rpx;
			border-radius: 10rpx;

			.fanhui {
				width: 35%;
				height: 80rpx;
				background: #c1c1c1;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				margin: 0 auto;
				font-size: 30rpx;
				margin-top: 20rpx;

			}

			.lingqu {
				color: rgba(224, 37, 27, 1);
				font-size: 28rpx;
				text-align: left;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 100%;
				height: 40rpx;
				line-height: 40rpx;
				margin-left: 20rpx;
				margin-top: 20rpx;
			}

			.xiangqing {
				width: 97%;
				height: auto;
				overflow-wrap: break-word;
				color: rgba(0, 0, 0, 1.0);
				font-size: 28rpx;
				font-weight: 500;
				text-align: left;
				line-height: 34rpx;
				margin: 10rpx 0 0 20rpx;
				padding-right: 20rpx;
			}
		}
	}

	.guize {
		width: 77vw;
		height: auto;
		border-radius: 2vw;
		box-shadow: 0 0 5px #c6c6c6;
		box-shadow: 0rpx 5rpx 38rpx 0rpx rgba(6, 0, 1, 0.4);
		background-color: white;
		padding: 3vw 2vw 5vw 2vw;
		position: absolute;
		top: 30vw;
		left: 10vw;
		z-index: 2000;
		line-height: 50rpx;
		// text-indent: 2em;
		font-size: 28rpx;
		z-index: 9999;
		
		.btn_yan {
			width: 30vw;
			height: 9vw;
			background-color: #2ba9f6;
			color: #fff;
			border: none;
			line-height: 9vw;
			font-size: 25rpx;
		}
		.catname {
			color: #999;
			margin-left: 30rpx;
			margin-top: 1rpx;
			font-size: 28rpx;
		}
		
		.d-con{
			.d-quxiao {
				width: 25vw;
				height: 70rpx;
				background-color: #9a9a9a;
				text-align: center;
				line-height: 70rpx;
				color: #fff;
				margin-left: 5vw;
				margin-top: 10rpx;
			}
			.d-queding{
				width: 25vw;
				height: 70rpx;
				background-color: #00aaff;
				text-align: center;
				line-height: 70rpx;
				color: #fff;
				margin-right: 5vw;
				margin-top: 10rpx;
			}
		}

		
	}
</style>